<template>
    <view class="pg-center relative z-0">
        <z-paging
            ref="paging"
            v-model="machineOptionList"
            @query="queryList"
            auto-show-back-to-top
            back-to-top-threshold="400rpx"
            back-to-top-with-animate
            auto-show-system-loading
        >
            <!-- 顶部新增和搜索栏 -->
            <template #top>
                <view class="w-750 fl-ro-cen bg-white pl-25">
                    <wd-button size="small" icon="add" @click="add">新增</wd-button>
                    <view class="w-700">
                        <wd-search v-model="searchValue" @search="search_start" @clear="search_clear" maxlength="10" focusWhenClear hide-cancel />
                    </view>
                </view>
            </template>
            <view class="w-750">
                <wd-cell-group border>
                    <wd-cell v-for="(item, index) in machineOptionList" :key="item.id" clickable @click="machineOption_onclick(item, index)" size="large">
                        <template #title>
                            <wd-text :text="item.name" color="#333" size="30rpx"></wd-text>
                        </template>
                        <template>
                            <wd-text :text="item.createTime" color="#c3c3c3" size="26rpx"></wd-text>
                        </template>
                    </wd-cell>
                </wd-cell-group>
            </view>
        </z-paging>
    </view>

    <wd-popup v-model="popupShow" position="bottom" :safe-area-inset-bottom="true" custom-class="fl-co-cen ju-cen">
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="edit">编辑</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="del">删除</text>
        <text class="w-750 fs-34 text-center p-20 bts-10" @click="cancel">取消</text>
    </wd-popup>
</template>

<script setup>
    import { ref, nextTick } from 'vue';
    import { onShow } from '@dcloudio/uni-app';
    import { api_machineOption_list, api_machineOption_deleteByIds } from '@/api/machineOption.js';

    const paging = ref(null);
    const machineOptionList = ref([]);
    const searchValue = ref(''); //搜索栏值
    const popupShow = ref(false); //底部弹窗
    const selectedmachineOption = ref(null); //被点击的machineOption

    //加载数据
    const queryList = async (pageNum, pageSize) => {
        let queryMap = {
            eq: {},
            in: {},
            like: {},
            ge: {},
            le: {},
            order: {
                create_time: 'desc'
            }
        };
        if (searchValue.value != '') {
            queryMap.like.name = searchValue.value;
        }
        // 访问查询设备场地接口
        try {
            let res = await api_machineOption_list({
                pageCut: true,
                pageNum: pageNum,
                pageSize: pageSize,
                queryMap: queryMap
            });
            paging.value.complete(res.data);
        } catch (e) {
            uni.showToast({
                title: e.msg,
                icon: 'none'
            });
        }
    };

    //确认搜索
    const search_start = () => {
        paging.value.reload();
    };

    //清空搜索
    const search_clear = () => {
        paging.value.reload();
    };

    //点击新增
    const add = () => {
        console.log('点击新增');
        uni.navigateTo({
            url: '/pages/merchant/machine-manage/machine-template/new-template/new-template'
        });
    };

    //点击模板列表
    const machineOption_onclick = (item, index) => {
        console.log('点击了', index, item);
        selectedmachineOption.value = item;
        popupShow.value = true;
    };

    //点击编辑
    const edit = () => {
        console.log('点击编辑');
        popupShow.value = false;
    };

    //点击删除
    const del = () => {
        console.log('点击删除', selectedmachineOption.value);
        uni.showModal({
            title: '确认删除',
            success: async (res) => {
                if (res.confirm) {
                    try {
                        await api_machineOption_deleteByIds([].concat(selectedmachineOption.value.id));
                        paging.value.refresh();
                    } catch (error) {
                        uni.showToast({
                            title: error.msg,
                            icon: 'none'
                        });
                    }
                    popupShow.value = false; //关闭弹窗
                }
            }
        });
    };

    //点击取消 关闭弹窗
    const cancel = () => {
        popupShow.value = false;
    };

    onShow(() => {
        //刷新列表
        nextTick(() => {
            paging.value.reload();
        });
    });
</script>

<style lang="scss" scoped>
    .txt {
        border-bottom: 1rpx solid #f8f8f8;
    }
</style>
